import { CellType } from ".";
import { GkhTableTemplate } from "../template";
import { dom } from "../tool";


// 表格模板
function TableTemplate(this: CellType, attribute: any = {}, mode: 1 | 2 | 3 = 3, template?: any) {
    this.type = 3;
    attribute.type = 3;
    if (!attribute.rows) {
        attribute.rows = 3;
    }
    if (!attribute.cols) {
        attribute.cols = 3;
    }
    this.attrData = attribute;
    this.parentContainer = template;
    const container = dom('div', {
        style: {
            padding: '1px'
        }
    });
    let tableInstance: any;
    let attribDiv: any;
    const createTable = () => {
        const inputs = attribDiv.getElementsByTagName('input');
        this.attrData.rows = parseInt(inputs[1].value);
        this.attrData.cols = parseInt(inputs[2].value);
        if (Number.isNaN(this.attrData.rows) || Number.isNaN(this.attrData.cols)) {
            console.error("行数、列数必须是整数");
            return false;
        }
        if (tableInstance) {
            tableInstance.init(this.attrData.rows, this.attrData.cols);
        }
        return false;
    }
    const fieldNameChange = (arg: any) => {
        this.attrData.fieldName = arg.target.value;
    }
    if (mode == 1) {
        attribDiv = dom('div', {
            childs: [
                dom('span', { childs: [dom('label', { innerText: '字段名：' }), dom('input', { attribute: { value: this.attrData.fieldName ? this.attrData.fieldName : '' }, listeners: { change: fieldNameChange } })] }),
                dom('span', { childs: [dom('label', { innerText: '行：' }), dom('input', { attribute: { value: this.attrData.rows } })] }),
                dom('span', { childs: [dom('label', { innerText: '列：' }), dom('input', { attribute: { value: this.attrData.cols } })] }),
                dom('button', { className: 'gkh-button', innerText: '生成表格', listeners: { click: createTable } })
            ]
        });
        container.appendChild(attribDiv);
    }
    this.tableInstance = tableInstance;
    this.getValue = () => {
        if (tableInstance) {
            return tableInstance.getValues();
        }
        return undefined;
    };
    this.setValue = (arg) => {
        if (tableInstance) {
            tableInstance.setValues(arg);
        }
    };
    this.reset = () => {
        if (tableInstance) {
            tableInstance.reset();
        }
    };
    this.getAttrData = function () {
        if (tableInstance) {
            this.attrData.templateData = tableInstance.getTemplateData();
        }
        return this.attrData;
    }
    this.sizeChange = function () {
        if (tableInstance) {
            tableInstance.sizeChange(false);
        }
    }
    this.render = () => {
        return container;
    };
    this.renderAfter = () => {
        if (!tableInstance) {
            tableInstance = new GkhTableTemplate(container, mode);
            this.tableInstance = tableInstance;
        }
        if (attribute.templateData) {
            tableInstance.renderTemplate(attribute.templateData)
        } else {
            tableInstance.init(this.attrData.rows, this.attrData.cols);
        }
        tableInstance.sizeChange();
    }
}

export default TableTemplate as unknown as CellType;